<template>
  <div class="box1">
    <div class="title">
      <span>队伍信息</span>
      <span v-if="hasTeam" @click="goToMyTeam">更多>>></span>
    </div>
    <div class="content">
      <template v-if="hasTeam">
        <div class="team-detail-container">
          <!-- 基本信息区域 -->
          <div class="basic-info-section">
            <h3 class="section-title">基本信息</h3>
            <el-descriptions :column="2" border label-width="150" class="fixed-width-descriptions">
              <el-descriptions-item label="所属分组">{{ team.group?.groupName || '-' }}</el-descriptions-item>
              <el-descriptions-item label="毕设名称">{{ team.teamName || '-' }}</el-descriptions-item>
              <el-descriptions-item label="毕设简介">
                <div class="summary-content">{{ team.summary || '-' }}</div>
              </el-descriptions-item>
            </el-descriptions>
          </div>

          <!-- 指导老师区域 -->
          <div class="teachers-section">
            <h3 class="section-title">指导老师</h3>
            <el-table :data="displayedTeamTeachers" border style="width: 100%">
              <el-table-column label="教师姓名" align="center" prop="teacher.user.nickName" />
              <el-table-column label="研究方向" align="center" prop="teacher.majorField" />
              <el-table-column v-if="!hasSelectedTeacher" label="志愿" align="center" width="100">
                <template #default="{ row }">第{{ row.sort }}志愿</template>
              </el-table-column>
              <el-table-column v-if="!hasSelectedTeacher" label="状态" align="center" width="90">
                <template #default="{ row }">
                  <el-tag :type="row.selectFlag == '1' ? 'success' : 'info'" size="small">
                    {{ row.selectFlag == '1' ? '已选中' : '未选中' }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
            <el-empty v-if="!displayedTeamTeachers.length" description="暂无指导老师" :image-size="60" />
          </div>

          <!-- 队伍成员区域 -->
          <div class="members-section">
            <h3 class="section-title">队伍成员</h3>
            <el-table :data="sortedStudents" border style="width: 100%">
              <el-table-column label="角色" align="center" width="80">
                <template #default="{ row }">
                  <el-tag :type="row.isLeader === '1' ? 'warning' : 'success'" size="small">
                    {{ row.isLeader === '1' ? '队长' : '队员' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="姓名" align="center" prop="student.user.nickName" />
              <el-table-column label="学号" align="center" prop="student.stuId" />
              <el-table-column label="专业" align="center" prop="student.major.majorName" />
            </el-table>
            <el-empty v-if="!sortedStudents.length" description="暂无队伍成员" :image-size="60" />
          </div>
        </div>
      </template>

      <template v-else>
        <div class="empty">
          <el-empty description="还没有加入队伍" :image-size="120" />
          <el-button type="primary" size="large" @click="goCreateTeam">创建队伍</el-button>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps({
  team: { type: Object, default: () => ({}) }
})
const team = computed(() => props.team || {})

const hasTeam = computed(() => {
  const t = team.value
  if (!t) return false
  return Boolean(t.teamId || t.teamName || (Array.isArray(t.studentTeams) && t.studentTeams.length > 0) || (Array.isArray(t.teamTeachers) && t.teamTeachers.length > 0))
})

const router = useRouter()
const goToMyTeam = () => {
  router.push('/myTeam')
}

const goCreateTeam = () => {
  router.push('/student/createteam')
}



// 检查是否有已选中的老师
const hasSelectedTeacher = computed(() => {
  const list = team.value && Array.isArray(team.value.teamTeachers) ? team.value.teamTeachers : []
  return list.some(t => t.selectFlag == '1')
})

// 如果有已选中的老师，只显示已选中的；否则显示所有志愿老师
const displayedTeamTeachers = computed(() => {
  const list = team.value && Array.isArray(team.value.teamTeachers) ? team.value.teamTeachers : []

  // 如果有 selectFlag == '1' 的教师，只显示该教师
  const selectedTeacher = list.find(t => t.selectFlag == '1')
  if (selectedTeacher) {
    return [selectedTeacher]
  }

  // 否则显示所有志愿教师（按志愿顺序排序）
  return list.sort((a, b) => a.sort - b.sort)
})

// 排序后的学生列表（队长在前）
const sortedStudents = computed(() => {
  if (!team.value.studentTeams) return []
  return [...team.value.studentTeams].sort((a, b) => {
    if (a.isLeader === '1' && b.isLeader !== '1') return -1
    if (a.isLeader !== '1' && b.isLeader === '1') return 1
    return 0
  })
})
</script>

<style lang="scss" scoped>
$padding: 12px;
$border-radius: 10px;
$border-bottom: 1px solid #e5e5e5;
$full-height: calc(100dvh - 84px);

.box1 {
  background-color: #fff;
  border-radius: $border-radius;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  font-size: 15px; // 全局基础字体增大

  .title {
    font-size: 24px; // 标题增大
    font-weight: 600;
    color: var(--el-color-primary);
    padding: 16px;
    border-bottom: 1px solid #e5e5e5;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

     span:nth-of-type(2) {
      cursor: pointer;
      font-size: 20px; // 增大

      &:hover {
        opacity: 0.8;
      }
    }
  }

  .content {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
}

.team-detail-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.section-title {
  margin: 0 0 12px 0;
  font-size: 17px; // 增大一号
  font-weight: 600;
  color: #303133;
  position: relative;
  padding-left: 12px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background-color: var(--el-color-primary);
  border-radius: 2px;
}

.summary-content {
  max-height: 80px;
  overflow-y: auto;
  line-height: 1.5;
  font-size: 15px;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex: 1;
  min-height: 400px;
  background: #fafafa;
  padding: 40px 20px;
  border-radius: 8px;
  border: 2px dashed #d9d9d9;
  font-size: 15px;

  :deep(.el-button) {
    font-size: 15px;
  }
}

.fixed-width-descriptions {
  :deep(table) {
    table-layout: fixed;
  }
  :deep(.el-descriptions__content) {
    word-break: break-all;
    font-size: 15px; // 增大内容字体
  }
  :deep(.el-descriptions__label) {
    font-size: 15px; // 增大标签字体
  }
}

// Element Plus 组件字体增大
:deep(.el-table) {
  font-size: 15px;
}

:deep(.el-tag) {
  font-size: 13px;
}

:deep(.el-empty__description) {
  font-size: 15px;
}

/* 滚动条样式 */
.content::-webkit-scrollbar,
.summary-content::-webkit-scrollbar {
  width: 4px;
}

.content::-webkit-scrollbar-track,
.summary-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

.content::-webkit-scrollbar-thumb,
.summary-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}

.content::-webkit-scrollbar-thumb:hover,
.summary-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
